<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/cmms.css" />
		<link rel="stylesheet" type="text/css" href="../../css/doctor/project/common.css"/>
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/sale/orderDetail.css" />
		<script src="../../pdfjs/build/pdf.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.applyImgBox>div:first-child{
			line-height: 30px;
			border-bottom: 1px solid #E6E6E6;
		}
		.applyImgBox>.imgBox{
			padding: 5px 0;
		}
		.applyImgBox>.imgBox>img{
			width: 60px;
			height: 60px;
			margin:0 5px 5px 0 ;
		}
	</style>
	<body>
		<div id="orderDetail" v-cloak>
			<ul class="report">
				<li class="row1">
					<span class="name">{{detailMsg.patientName}}</span>
					<span class="sex">（{{detailMsg.patientSex=='1'?'女':'男'}} {{detailMsg.patientAge}}{{detailMsg.ageUnit}}）</span>
					<span class="right basic-color">
						<i class="icon iconfont icon-shijian-"></i>
						{{detailMsg.orderState+''|formatState}}
					</span>
				</li>
				<li class="row2" >
					<span>检验条形码:</span>
					<ul class="barcode">
						<li v-for="msg in detailMsg.specimenBarCode">{{msg}}</li>
					</ul>
					<span class="right">{{detailMsg.submitTime|replaceT}}</span>
				</li>
				<li class="row3">
					<ul>
						<li v-for='l in detailMsg.list'>
							<span>{{l.name}}</span>
							<span class="right">
								<span>¥{{l.price}}</span>
							</span>
						</li>
					</ul>
				</li>
				<li class="row4">
					共 <span class="basic-color">{{detailMsg.projectNum}}</span> 个检验项目
					<span class="right">总金额：{{detailMsg.amount}}</span>
				</li>
				<!--v-if="detailMsg.reprotList&&detailMsg.reprotList.length>0"-->
				<li class="row5" v-if="detailMsg.reprotList&&detailMsg.reprotList.length>0">
					<div @tap="readPdfReport(detailMsg.patientName)">
						<i class="icon iconfont icon-pdf basic-color"></i>
						PDF报告下载
					</div>
					<div @tap="readJpgReport(detailMsg.patientName)" >
						<i class="iconfont icon-tubiaozhizuomoban10 basic-color"></i>
						JPEG报告查看
					</div>
				</li>
			</ul>
			<a :href="'tel:'+detailMsg.patientPhone">
				<div class="contact">
					<i class="icon iconfont icon-dianhua1 basic-color"></i>
					联系患者
				</div>
			</a>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font14_3">
					<span class="margin-right-6">{{detailMsg.doctorName}}</span><span class="padding0_16">医生</span>
				</div>
				<div class="border-bottom-1px font12_3">
					手机号：{{detailMsg.patientPhone}}
				</div>
				<div class="border-bottom-1px font12_3">
					{{detailMsg.hospitalName}}
				</div>
				<div class="doctor-addr">
					<p class="font12_3">{{detailMsg.hospitalAddress}}</p>
				</div>
			</section>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font14_3">
					医学样本
				</div>
				<div class="border-bottom-1px" v-for="v in detailMsg.voList">
					<span class="font12_primary margin-right-8">{{v.samplingColor}}</span>
					<span class="font12_3"> {{v.samplingNum}}个</span>
				</div>
				<div class="font12_3">
					采样日期： {{detailMsg.samplingTime|replaceT}}
				</div>
			</section>
			<section class="panel order-doctor padding0_16" v-if="detailMsg.orderState>=9&&detailMsg.orderState<=11">
				<div class="border-bottom-1px overflow font14_3">
					<span class="left">结算</span>
					<span class="right basic-color">已支付</span>
				</div>
				<div class="border-bottom-1px overflow font12_3">
					<span class="left">检验费</span>
					<span class="right">{{detailMsg.amount}}</span>
				</div>
			</section>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font12_3 applyImgBox">
					<div>
						<span>申请单</span>
					</div>
					<div class="imgBox">
						<img :src="appImg" v-for="(appImg,index) in appImgList" :key="index" @tap="lookImg(appImg)">
					</div>
				</div>
			</section>
			<!--报告解读-->
			<div class="reportDetail" v-if="detailMsg.reprotList&&detailMsg.reprotList.length>0" v-for="reports in detailMsg.reprotList">
				<p><span>{{reports.orderItem}}</span></p>
				<ul class="detailItem" >
					<!--<li class="item4"><span>{{reports.orderItem}}</span></li>-->
					<li class="item1">
						<span class="orderName">标本条码：{{reports.specimenBarcode}}</span>
						<span class="right">
							<i class="icon iconfont icon-warning"></i>
							<span class="number">{{reports.abnormalNum}}</span>项异常
						</span>
					</li>
					<li class="item2">
						解读提示：点击带异常（红色）的数据可查看指示解读，解读内容来自第三方医学服务网站公开内容，仅供参考，不作为诊断依据。
					</li>
					<li class="item3">
						<table>
							<tr>
								<th>指标项</th>
								<!--<td>代码</td>-->
								<th>检测值</th>
								<th>参考范围</th>
								<th>单位</th>
							</tr>
							<tr @tap="readAbnormal(report.id,report.abnormalFlag,$event)" v-for="report in reports.list">
								<td :class="{'red':report.abnormalFlag=='1'?true:false}"><span class="noItemtip" :class="{'hidden':isTip}">此项目暂无解读!</span>{{report.labProjectName}}</td>
								<!--<td :class="{'red':report.abnormalFlag}">{{report.code}}</td>-->
								<td :class="{'red':report.abnormalFlag=='1'?true:false}">{{report.measureValue}}</td>
								<td :class="{'red':report.abnormalFlag=='1'?true:false}">{{report.referenceVaule}}</td>
								<td :class="{'red':report.abnormalFlag=='1'?true:false}">{{report.unit}}</td>
							</tr>
						</table>
					</li>
				</ul>
			</div>
			<!--弹出框-->
			<div class="explanation" v-cloak v-if="showModel">
				<div class="mask">
					<div class="title basic-bg-color">
						<span>{{abnormalRes.labProjectName}}</span>
						<i class="icon iconfont icon-shanchu" @tap="showModel=false"></i>
					</div>
					<div class="explanationDetail">
						<div class="abnormalBox" v-if="abnormalRes.influenceFactor">
							<p><span class="blueSign"></span><span>临床意义</span></p>
							<p>{{abnormalRes.influenceFactor}}</p>
						</div>
						<div class="abnormalBox" v-if="abnormalRes.resultExplain">
							<p><span class="blueSign"></span><span>观察重点</span></p>
							<p>{{abnormalRes.resultExplain}}</p>
						</div>
						<div class="abnormalBox" v-if="abnormalRes.abnormalResultExplain">
							<p><span class="blueSign"></span><span>异常结果解读</span></p>
							<p>{{abnormalRes.abnormalResultExplain}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/cmms.js?time=222"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script type="text/javascript">
			new Vue({
				el:"#orderDetail",
				data:{
					showModel:false,//显示 弹出框
					detailMsg:'',
					orderId:'',
					specimenBarCode:'',//检验条形码
					urlArr:[],
					tel:'',
					temp:'',
					shareUrl:'',
					abnormalRes:[],
					isTip:true,
					userId:'',
					reportList:[],//报告单，
					appImgList:[]
				},
				computed: {
		        	newVoList: function() {
		        		for(let i of res.voList){
		        			return (this.i.consumablesName || "").split(",")
						};
		        	}
		       },
				mounted(){
					this.init();
					this.getUrl();
					this.getPages();
				},
				methods:{
					init(){
						/*接口配置*/
		    			AT.muiAjaxDoctor('/partner-sale/partnerSale/wxConfig','post',{url:location.href.split('#')[0]},function(res){
							wx.config({
//								debug: true,
								appId:res.appId,
								timestamp:res.timestamp,
								nonceStr:res.nonceStr,
								signature:res.signature,
								jsApiList:['previewImage','updateAppMessageShareData']
							});
						});
						this.shareUrl = location.href;
					},
					getUrl(){
						let _this=this;
						var url = location.search; //获取url中"?"符后的字串    
						var theRequest = new Object();  
//						console.log(url);
					   	if (url.indexOf("?") != -1) {   
					      var str = url.substr(1);  
//					      console.log(str);
					      strs = str.split("&");  
					      for(var i = 0; i < strs.length; i ++) {   
					         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
					      } 
					   	}   
					   	console.log(theRequest);
					   	_this.orderId = theRequest.id;
					   	_this.userId = theRequest.userId;
//					   	_this.specimenBarCode = theRequest.specimenBarCode;
					},
					getPages(){
						let _this=this;
//						/*订单ID查报告详情*/
						AT.muiAjaxDoctor('/partner-sale/order/getOrderDetailsById','post',{
							id:_this.orderId
						},function(res){
							console.log(res);	
							_this.detailMsg=res;
							_this.tel='tel:'+res.patientPhone;
							for(let i of _this.detailMsg.voList){
								if(i.consumablesName==''){
									let temp=i.samplingRequired.split(',');
									_this.newVoList.push(temp);
								}
							}
							if(res.orderApplyAttachmentIds){
								let arr = [];
								for(let imgId of res.orderApplyAttachmentIds){
									arr.push(_this.getImgSrc(imgId));
								}
								_this.appImgList = arr;
							}
						});
						/*报告的图片地址*/
						AT.muiAjaxDoctor('/partner-sale/order/getOrderReportByOrderId','post',{
							id:_this.orderId
						},function(res){
							console.log(res);
							_this.reportList = res;
						});
						/*条码查报告详情*/
//						AT.muiAjaxDoctor('/partner-sale/order/getByServiceCode','post',{
//							specimenBarCode:_this.specimenBarCode
//						},function(res){
//							console.log(res);
//							_this.detailMsg=res;
//						});
					},
					/*查看异常报告*/
					readAbnormal(id,abnormalFlag,event){
						let _this = this;
						if(abnormalFlag==1){
							AT.muiAjaxDoctor('/partner-sale/order/getExplain','post',{
								id:id
							},function(realData){
								console.log(realData);
								_this.abnormalRes = realData;
								if(_this.abnormalRes.influenceFactor||_this.abnormalRes.resultExplain||_this.abnormalRes.abnormalResultExplain){
									_this.showModel=true;
								}else{
									_this.showModel=false;
									event.target.parentNode.firstChild.firstChild.style.display='block';
									const timer = setTimeout(() =>{                    
										event.target.parentNode.firstChild.firstChild.style.display='none';
									}, 2000);  
									_this.$once('hook:beforeDestroy', () => {            
									    clearTimeout(timer);                                    
									});
								}
							});
						}else{
							
						}
					},
					/*获取jpg报告地址*/
					readJpgReport(patientName){
						let _this=this;
						let pdfList = _this.reportList.jpgList;
						console.log(pdfList);
						_this.urlArr = [];
						for(let i of pdfList){
							let url=AT.baseUrl+'/common/common/downLoadFile?type=0&fileName='+patientName+'&attachId='+i;
							_this.urlArr.push(url);
						}
						console.log(_this.urlArr);
						_this.getImg();
					},
					/*获取pdf报告地址*/
					readPdfReport(patientName){
						let _this=this;
						let pdfList = _this.reportList.pdfList;
						let str = "";
						for (let i = 0; i < pdfList.length; i++) {
					        str += pdfList[i]+ ",";
					    }
						if(str.length>0){
							str = str.substr(0,str.length-1);
						}
						console.log(str);
						AT.muiAjax('/common/common/mergeReportPDF','post',{
						  	ids: str,
								type:0,
								userType:1,
						  	userId: _this.userId
						},function(res1){
							console.log(res1);
						    let pdfUrl =AT.baseUrl+'/common/common/downLoadFile?type=0&fileName=&attachId='+res1.id+'&num='+Math.random()*10000+'&shareName='+patientName;
						    location.href = AT.baseDomain+'/pdfjs/web/viewer.html?file='+encodeURIComponent(pdfUrl);
						});
					},
					/*调用微信接口展示图片*/
					getImg(){
						let _this=this;
						wx.previewImage({
							current: _this.urlArr[0], // 当前显示图片的http链接
							urls: _this.urlArr// 需要预览的图片http链接列表
						});
					},
					/*调用微信分享接口*/
					getWX(){
//						mui.alert('调用微信分享接口');
						wx.ready (function () {
						    // 微信分享的数据
						    var shareData = {
						        "imgUrl" : "../../img/ANtlog.png",    // 分享显示的缩略图地址
						        "link" : _this.shareUrl,    // 分享地址
						        "desc" : "",   // 分享描述
						        "title" : "",   // 分享标题
						        success : function () {  
						            mui.toast("分享成功!"); 
						        }
						    }
					       wx.updateAppMessageShareData (shareData); 
					       wx.updateTimelineShareData (shareData);
						});
					},
					lookImg(img){
						let _this=this;
						wx.previewImage({
							current: img, // 当前显示图片的http链接
							urls: _this.appImgList// 需要预览的图片http链接列表
						});
					},
					//获取单张图片地址
					getImgSrc(attachId){
						let baseURL = AT.baseUrl;
						return `${baseURL}/common/common/downLoadFile?attachId=${attachId}&type=0`
					},
				}
			})
		</script>
	</body>

</html>